<template>
  <div>
    <div v-if="routeGrids">
      <vc-entity
        v-for="grid in grids"
        :key="grid.id"
        :position="getPosition(grid)"
      >
        <vc-graphics-box
          :dimensions="getDimensions(grid)"
          :material="grid.areoTypeColor"
          :outline-color="grid.areoTypeColor"
          :outline="true"
        ></vc-graphics-box>
      </vc-entity>
    </div>
    <Points :visible="routePoints" @change="handleChange" />
    <Generate :visible="routeGenerate" @change="handleChange" />
    <div v-if="routeList">
      <div v-for="route in routes" :key="route.key">
        <!-- 起点 -->
        <StartPoint :data="route" :showLogo="portVisible" />
        <!-- 航线 -->
        <Line :data="route" />
        <!-- 终点 -->
        <EndPoint :data="route" :showLogo="portVisible" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, watch } from "vue";
import { VcEntity, VcGraphicsBox, VcGraphicsPoint } from "vue-cesium";
import { ElMessage } from "element-plus";
import api from "@/api/route";

import Points from "./Points.vue";
import Generate from "./Generate.vue";
import StartPoint from "../AirRoute/StartPoint.vue";
import Line from "../AirRoute/Line.vue";
import EndPoint from "../AirRoute/EndPoint.vue";

const props = defineProps({
  routePoints: Boolean,
  routeGenerate: Boolean,
  routeGrids: Boolean,
  routeList: Boolean,
  portVisible: Boolean,
});

const { routePoints, routeGenerate, routeGrids, routeList } = toRefs(props);
const grids = ref([]);
const params = ref([]);
const routes = ref([]);

const emits = defineEmits(["change"]);

watch(routeList, (newValue, oldValue) => {
  if (newValue) {
    if (routes.value.length === 0) {
      ElMessage.info({
        message: "请先航路平滑后获取航路",
        onClose: () => {
          emits("change", "routeList", false);
        },
      });
    }
  }
});

const getPosition = (val) => {
  return { lng: val.longitude, lat: val.latitude, height: val.height };
};

const getDimensions = (val) => {
  return { x: val.edgeLength, y: val.edgeLength, z: val.edgeLength };
};

const handleChange = (key, data) => {
  emits("change", key);
  if (key === "routeGenerate") {
    if (data) {
      params.value = data.params;
      grids.value = data.grids;
      routes.value = [];
      emits("change", "routeGrids");
      emits("change", "routeList", false);
    }
  }
};

const handleGenerateRoute = async () => {
  if (params.value.length === 0) {
    ElMessage.error("请先生成航路！");
    return;
  }
  const data = params.value.map((item) => `${item.startId}-${item.endId}`);
  const result = await api.getRouteList(data);
  if (result.code === 200) {
    routes.value = (result.data || []).map((item) => ({
      ...item,
      startPoint: JSON.parse(item.startPoint),
      endPoint: JSON.parse(item.endPoint),
      points: JSON.parse(item.points),
    }));
    ElMessage.success({
      message: result.msg,
      onClose: () => {},
    });
  } else {
    ElMessage.error(result.msg || "服务器忙，请稍后重试");
  }
};

defineExpose({
  handleGenerateRoute,
});
</script>

<style scoped></style>
